<template>
  <el-table :data="list" style="width: 100%" border>
    <el-table-column fixed width="410" label="商品信息">
      <template #default="scope">
        <div class="flex items-center">
          <img class="size-[64px]" :src="scope.row.url" />
          <div class="ml-[10px]">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.name"
              placement="top"
            >
              <div
                class="w-[200px] whitespace-nowrap overflow-hidden text-ellipsis"
              >
                {{ scope.row.name }}
              </div>
            </el-tooltip>

            <div>
              <span class="text-[#999999]">{{ scope.row.codeTitle }}</span
              >{{ scope.row.code }}
            </div>
          </div>
          <div class="ml-[36px]" @click="handleAdd(scope.$index, scope.row)">
            <el-button type="primary" size="small"> 添加SKU </el-button>
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="SKU信息" width="130">
      <template #default="scope">
        <div v-if="scope.row.add">
          <div class="text-[#409EFF]">
            {{ scope.row.color }} / {{ scope.row.size }}
          </div>
          <div class="font-bold">
            <span class="text-[#999999] font-normal mr-[10px]">市场价:</span>¥{{
              scope.row.marketPrice
            }}
          </div>
          <div class="font-bold">
            <span class="text-[#999999] font-normal mr-[10px]">库存价:</span>¥{{
              scope.row.inventoryPrice
            }}
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="入库数量" width="130">
      <template #default="scope">
        <el-input-number
          v-if="scope.row.add"
          style="width: 90px"
          v-model="scope.row.inventoryNum"
          @blur="
            (e) => {
              const value = e.target.value;
              handleBlurPrice(value, scope.$index, scope.row);
            }
          "
          :controls="false"
        />
      </template>
    </el-table-column>
    <el-table-column label="推荐库位" width="400">
      <template #default="scope">
        <div class="flex items-end justify-between" v-if="scope.row.add">
          <div class="flex flex-col">
            <div
              class="flex items-center mt-[10px] first-of-type:mt-[0px]"
              v-for="(item, index) in scope.row.recommend"
              :key="index"
            >
              <el-cascader
                :options="options"
                separator="-"
                v-model="scope.row.recommend[index].location"
                placeholder="请选择库位"
              >
                <template #default="{ node, data }">
                  <div class="flex items-center justify-between">
                    <span>{{ data.label }}</span>
                    <span
                      :class="[
                        'h-[24px] leading-[24px] px-[3px] rounded-[4px] text-[12px]',
                        data.isSpell
                          ? 'text-[#FF7600] bg-[rgba(255,118,0,0.1)]'
                          : 'text-[#409EFF] bg-[rgba(64,158,255,0.1)]',
                      ]"
                      v-if="node.isLeaf"
                    >
                      <span v-if="data.isSpell">拼/</span>可用{{ data.num }}
                    </span>
                  </div>
                </template>
              </el-cascader>
              <div>
                <el-input-number
                  style="width: 60px; margin-left: 10px"
                  v-model="scope.row.recommend[index].recommendNum"
                  :controls="false"
                  @blur="
                    (e) => {
                      const value = e.target.value;
                      handleBlur(value, scope.$index, scope.row, index);
                    }
                  "
                />
              </div>
            </div>
          </div>
          <div class="ml-[10px] h-[32px]">
            <el-button
              :icon="Minus"
              size="small"
              @click="handleDelNum(scope.$index, scope.row)"
              style="height: 100%; background: rgb(241 241 241)"
            />
            <el-button
              :icon="Plus"
              size="small"
              @click="handleAddNum(scope.$index, scope.row)"
              style="height: 100%; background: rgb(241 241 241)"
            />
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="入库单价" width="200">
      <template #default="scope">
        <div v-if="scope.row.add">
          <el-input-number
            style="width: 90px"
            v-model="scope.row.unitPrice"
            :controls="false"
            @blur="
              (e) => {
                const value = e.target.value;
                handleBlurPrice(value, scope.$index, scope.row);
              }
            "
          />
          <div
            class="text-[red] text-[12px]"
            v-if="scope.row.unitPrice && scope.row.inventoryNum"
          >
            <div>加权平均价: {{ scope.row.averagePrice }}</div>
            <div>库存数量{{ scope.row.storeNum }}</div>
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="批次" width="150">
      <template #default="scope">
        <div v-if="scope.row.add">{{ scope.row.batch }}</div>
      </template>
    </el-table-column>
    <el-table-column label="备注信息" width="150">
      <template #default="scope">
        <el-input
          v-if="scope.row.add"
          v-model="scope.row.remark"
          placeholder="输入备注"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button
          v-if="scope.row.add"
          plain
          type="primary"
          size="small"
          @click="handleRemove(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Minus, Plus } from "@element-plus/icons-vue";
import { ref, defineEmits } from "vue";
import { options as optionList } from "../constants";
import { ElMessage } from "element-plus";

interface IItem {
  id: number;
  url: string;
  code: string;
  codeTitle: string;
  name: string;
  color: string;
  size: string;
  marketPrice: number;
  inventoryPrice: number;
  averagePrice: number;
  inventoryNum: number;
  remark: string;
  batch: string;
  unitPrice: number;
  recommend: {
    recommendNum: string;
    location: string[];
  }[];
  add: boolean;
  storeNum: number;
}

const props = defineProps<{
  list: any[];
}>();

const emits = defineEmits([
  "onAdd",
  "onAddNum",
  "onDelNum",
  "onRemove",
  "onUpdateNum",
  "onBlurPrice",
]);

const options = ref(optionList());
const handleAdd = (index: number, row: IItem) => {
  emits("onAdd", index, row);
};

const handleAddNum = (index: number, row: IItem) => {
  emits("onAddNum", index, row);
};
const handleDelNum = (index: number, row: IItem) => {
  const { recommend } = row;
  if (recommend.length === 1) {
    ElMessage({
      message: "不可删除.",
      type: "warning",
      center: true,
      offset: 20,
    });
    return;
  }
  emits("onDelNum", index, row);
};

const handleRemove = (index: number, row: IItem) => {
  emits("onRemove", index, row);
};

const handleBlur = (
  val: number,
  index: number,
  row: IItem,
  nodeIndex: number
) => {
  const all = row.recommend.reduce((pre, cur) => {
    return pre + Number(cur.recommendNum);
  }, 0);
  if (all > row.inventoryNum) {
    // 如果推荐库数 大于入库数量则提示
    ElMessage({
      message: "输入的数量有误请重新输入.",
      type: "warning",
      center: true,
      offset: 20,
    });
    emits("onUpdateNum", index, row, nodeIndex);
  }
};

const handleBlurPrice = (val: number, index: number, row: IItem) => {
  // 计算平均值
  emits("onBlurPrice", val, index, row);
};
</script>
